import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { getTopListAction } from '../../store/actionCreators'

import LJThemeHeaderRCM from 'components/theme-header-rcm'
import LJTopRanking from 'components/top-ranking'
import { RankingWrapper } from "./style";

export default memo(function LJRecommendRanking() {
    // state

    // redux hooks
    const dispatch = useDispatch()
    const { upRanking, newRanking, originRanking } = useSelector(state => ({
        upRanking: state.getIn(["recommend", "upRanking"]),
        newRanking: state.getIn(["recommend", "newRanking"]),
        originRanking: state.getIn(["recommend", "originRanking"])
    }), shallowEqual)

    // other hooks
    useEffect(() => {
        dispatch(getTopListAction(0))
        dispatch(getTopListAction(2))
        dispatch(getTopListAction(3))
    }, [dispatch])

    // 其他业务逻辑

    return (
        <RankingWrapper>
            <LJThemeHeaderRCM title="榜单"></LJThemeHeaderRCM>
            <div className="tops">
                <LJTopRanking info={upRanking}></LJTopRanking>
                <LJTopRanking info={newRanking}></LJTopRanking>
                <LJTopRanking info={originRanking}></LJTopRanking>
            </div>
        </RankingWrapper>
    )
})
